<template>
  <div class="users">
    <div class="users-nav">
      <div class="users-nav-logo">
        <img src="../static/users/logo@2x.png" alt="" />
      </div>
      <div class="users-nav-msg">
        <img src="../static/users/search@2x.png" alt="" />
        <img src="../static/users/set@2x.png" alt="" />
        <img src="../static/users/tx@2x.png" alt="" class="users-nav-msg-tx" />
      </div>
    </div>
    <div class="users-breadcrumb">
      <img src="../static/users/home@2x.png" alt="" />
      <div>
        <span>&ensp;/&ensp;课程管理&ensp;/&ensp;<text>选课信息</text></span>
      </div>
    </div>
    <div class="users-main">
      <div class="users-main-top">
        <div class="users-main-top-select">
          <div class="users-main-top-select-input">
            <text>学校名称</text>
            <el-input
              placeholder="请输入学校名称"
              v-model="inputMsg.schoolName"
            ></el-input>
          </div>
          <div class="users-main-top-select-input">
            <text>全部课程</text>
            <el-input
              placeholder="请输入学生姓名"
              v-model="inputMsg.lessonName"
            ></el-input>
          </div>
          <div class="users-main-top-select-select">
            <text>学生名称</text>
            <el-select v-model="value" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="users-main-top-select-select">
            <text>性别</text>
            <el-select v-model="value" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="users-main-top-select-select">
            <text>班级</text>
            <el-select v-model="value" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="user-main-top-btn">
          <el-button :icon="Search" plain>查询</el-button>
          <el-button :icon="RefreshRight" plain>重置</el-button>
        </div>
      </div>
      <div class="users-main-control">
        <el-button :icon="Plus" plain>新建</el-button>
        <el-button :icon="Download" plain>导出</el-button>
      </div>
      <div class="users-main-table">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#FAFAFA' }"
          :row-style="rowStyle"
          :cell-style="cellStyle"
        >
          <el-table-column
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            v-for="item in cloums"
            :key="item"
            height:42
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="users-main-page">
        <text>共200条</text>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="500"
          class="mt-4"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Search, RefreshRight, Plus, Download } from '@element-plus/icons-vue';
import tableList from '../data/tablelist';
import selecList from '../data/selectList';
import { reactive } from 'vue';
import { ref } from 'vue';

// import { Vue } from 'vue-class-component';
export default {
  data() {
    let inputMsg = reactive({ schoolName: '', lessonName: '' });
    const { tableData, cloums, StatusList } = tableList;
    const { options1, options2, options3 } = selecList;
    const value = ref('');
    return {
      Search,
      RefreshRight,
      Plus,
      Download,
      tableData,
      cloums,
      StatusList,
      inputMsg,
      options1,
      options2,
      options3,
      value,
    };
  },
  methods: {
    // rowStyle({ row, rowIndex }) {
    //   let stylejson = {};
    //   if (rowIndex === 2) {
    //     stylejson.color = 'green';
    //     return stylejson;
    //   } else {
    //     return '';
    //   }
    // },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let stylejson = {};
      if (columnIndex === 8) {
        stylejson.color = '#EB5757';
        return stylejson;
      } else {
        return '';
      }
    },
  },
};
// export default class UerHome extends Vue {}
</script>

<style lang="less" scoped>
.users {
  background: rgba(247, 248, 250, 1);
  padding-bottom: 20px;
}
.users-nav {
  width: 100%;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 10px 0px rgba(78, 89, 105, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  & .users-nav-logo {
    margin-left: 16px;
    & img {
      width: 131px;
      height: 26.4px;
    }
  }
  & .users-nav-msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & img {
      width: 18px;
      height: 18px;
      margin-right: 16px;
    }
    & .users-nav-msg-tx {
      width: 32px;
      height: 32px;
    }
  }
}
.users-breadcrumb {
  width: 100%;
  height: 56px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  & img {
    width: 16px;
    height: 16px;
  }
  & span {
    color: rgba(78, 89, 105, 1);
    font-size: 14px;
    & text {
      color: rgba(29, 33, 41, 1);
      font-size: 14px;
      font-weight: 500;
    }
  }
}
.users-main {
  width: 1400px;
  height: 700px;
  background: rgba(255, 255, 255, 1);
  margin-left: 20px;

  & .users-main-top {
    width: 1400px;
    height: 112px;
    display: flex;
    justify-content: space-between;
    & .users-main-top-select {
      width: 1275px;
      height: 122px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 1px;
      & .users-main-top-select-input {
        display: flex;
        align-items: center;
        & text {
          width: 56px;
          height: 22px;
          color: rgba(78, 89, 105, 1);
          font-size: 14px;
          margin-left: 24px;
        }
        & ::v-deep {
          .el-input {
            width: 322px;
            height: 32px;
            margin-left: 24px;
          }
        }
      }
      & .users-main-top-select-select {
        display: flex;
        align-items: center;
        position: relative;
        & text {
          width: 56px;
          height: 22px;
          color: rgba(78, 89, 105, 1);
          font-size: 14px;
          margin-left: 24px;
        }
        & ::v-deep {
          .el-select {
            width: 322px;
            height: 32px;
            margin-left: 22px;
          }
        }
      }
    }
    & .user-main-top-btn {
      height: 122px;
      display: flex;
      flex-direction: column;
      margin-right: 7px;
      & ::v-deep {
        .el-button:first-child {
          width: 80px;
          height: 32px;
          margin-left: 12px;
          background: rgba(22, 93, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
        .el-button {
          width: 80px;
          height: 32px;
          margin-top: 20px;
          color: rgba(29, 33, 41, 1);
          font-size: 14px;
          background: rgba(242, 243, 245, 1);
        }
      }
    }
  }
  & .users-main-control {
    width: 1400px;
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    & ::v-deep {
      .el-button {
        width: 80px;
        height: 32px;
        background: rgba(22, 93, 255, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        margin-right: 7px;
      }
      .el-button:first-child {
        width: 80px;
        height: 32px;
        background: rgba(242, 243, 245, 1);
        color: rgba(29, 33, 41, 1);
        font-size: 14px;
        margin-left: 20px;
      }
    }
  }
  & .users-main-table {
    margin-left: 20px;
  }
  & .users-main-page {
    width: 1400px;
    height: 73px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    & text {
      margin-right: 12px;
    }
  }
}
.users-main-top-select:after {
  content: '';
  //必须设置 content 属性才能生效
  width: 2px;
  height: 80px;
  background-color: rgba(238, 238, 238, 1);
  position: absolute;
  left: 1325px;
  top: 138px;
}
.users-main-control::before {
  content: '';
  //必须设置 content 属性才能生效
  width: 1370px;
  height: 2px;
  background-color: rgba(238, 238, 238, 1);
  position: absolute;
  left: 20px;
  top: 10px;
}
</style>
